<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>主页</title>
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<header class="header_status">
			<!-- 头部导航栏 -->
			<nav class="header_nav">
				<a href="#" class="nav_item">首页</a>
				<a href="#" class="nav_item">前端</a>
				<a href="#" class="nav_item">后端</a>
				<a href="#" class="nav_item">Android</a>
				<a href="#" class="nav_item">人工智能</a>
				<a href="login.html" class="nav_item nav_item1">登录</a>
				<a href="registe.html" class="nav_item nav_item1">注册</a>
			</nav>
		</header>
		<section>
			<div id="banner">
				<!-- 二级菜单 -->
				<div class="nav">
					<ul class="nav-list">
						<li class="nav-item-first">
							<a href="javascript:;" class="first-link">前端</a><i></i> <!-- javascript:; 点击不做处理 -->
							<div class="show-wrap">
								<div class="small-title">
									<span>前端开发</span>
								</div>
								<div class="tag-box">
									<div class="tag-box-a">
										<a href="javascript:;">HTML/CSS</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">JavaScript </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Vue.js </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">React.JS </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Angular </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Node.js </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">jQuery </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Bootstrap </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Sass/Less </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">WebApp </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">小程序 </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">前端工具 </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">CSS </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Html5 </a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">CSS3 </a>
									</div>
								</div>

							</div>
						</li>

						<li class="nav-item-first">
							<a href="javascript:;" class="first-link">后端</a>
							<div class="show-wrap">
								<div class="small-title">
									<span>后端开发</span>
								</div>
								<div class="tag-box">
									<div class="tag-box-a">
										<a href="javascript:;">Java</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">SpringBoot</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Spring&nbsp;Cloud</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Python</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">爬虫</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Django</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Tornado</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Go</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">PHP</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">C</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">C++</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">C#</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Ruby</a>
									</div>
								</div>
							</div>
						</li>

						<li class="nav-item-first">
							<a href="javascript:;" class="first-link">移动 Android</a>
							<div class="show-wrap">
								<div class="small-title">
									<span>移动开发</span>
								</div>
								<div class="tag-box">
									<div class="tag-box-a">
										<a href="javascript:;">Android</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">iOS</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">React</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">native</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">WEEX</a>
									</div>
								</div>
							</div>
						</li>

						<li class="nav-item-first">
							<a href="javascript:;" class="first-link">大数据</a>
							<div class="show-wrap">
								<div class="small-title">
									<span>云计算&大数据大数据</span>
								</div>
								<div class="tag-box">
									<div class="tag-box-a">
										<a href="javascript:;">Hadoop</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Spark</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Hbase</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Storm</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">云计算</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Docker</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Kubernetes</a>
									</div>
								</div>
							</div>
						</li>

						<li class="nav-item-first">
							<a href="javascript:;" class="first-link">数据库</a>
							<div class="show-wrap">
								<div class="small-title">
									<span>数据库</span>
								</div>
								<div class="tag-box">
									<div class="tag-box-a">
										<a href="javascript:;">MySQL</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Redis</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">MongoDB</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Oracle</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">SQL</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">Server</a>
									</div>
									<div class="tag-box-a">
										<a href="javascript:;">NoSql</a>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 轮播图 -->
				<div class="img-wrap">
					<ul>
						<li class="item active" style="display: block;">
							<img src="img/1.png" width="936" height="316" alt="">
						</li>
						<li class="item">
							<img src="img/2.png" width="936" height="316" alt="">
						</li>
						<li class="item">
							<img src="img/3.jpg" width="936" height="316" alt="">
						</li>
						<li class="item">
							<img src="img/4.png" width="936" height="316" alt="">
						</li>
					</ul>
				</div>
				<!-- 左右按钮 -->
				<div class="lr-tab">
					<div class="left btn"></div>
					<div class="right btn"></div>
				</div>
				<!-- 底部的四个圆点 -->
				<div class="tab-btn">
					<ul>
						<li class="btn"></li>
						<li class="btn"></li>
						<li class="btn"></li>
						<li class="btn"></li>
					</ul>
				</div>
			</div>

		</section>
		<section>
			<div class="course-box">
				<p>实&nbsp战&nbsp推&nbsp荐</p>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/suanfa.jpg" width="216" height="120">
						<span>算法大神带你玩转数据结构 从入门到精通</span>
						<div class="label-style">
							<label>算法与数据结构</label>
						</div>
						<div class="course-stat tuijian">推荐</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">6666</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/nodejs.jpg" width="216" height="120">
						<span>Node.js从零开发Web Server博客项目 前端晋升全栈工程师必备</span>
						<div class="label-style">
							<label>Node.js</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">5612</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="" target="_blank">
						<img src="img/python.jpg" width="216" height="120">
						<span>Google老师亲授 TensorFlow2.0 入门到进阶</span>
						<div class="label-style">
							<label>Python</label>
							<label>深度学习</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">初级</span>
						<span class="span-sty touxiang">1453</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="" target="_blank">
						<img src="img/springcloud.jpg" width="216" height="120">
						<span>SpringCloud Finchley三版本(M2+RELEASE+SR2)微服务实战</span>
						<div class="label-style">
							<label>SpringCloud</label>
						</div>
						<div class="course-stat">升级</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">485</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="" target="_blank">
						<img src="img/go.jpg" width="216" height="120">
						<span>Google资深工程师深度讲解Go语言</span>
						<div class="label-style">
							<label>Go</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">958</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
			</div>
		</section>
		<section>
			<div class="course-box">
				<p>新&nbsp上&nbsp好&nbsp课</p>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/react.jpg" width="216" height="120">
						<span>从基础到实战 手把手带你掌握新版Webpack4.0</span>
						<div class="label-style">
							<label>React.js</label>
							<label>Vue.js</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">1560</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/fink.png" width="216" height="120">
						<span>Flink最锋利的武器---FlinkSQL入门和实战</span>
						<div class="label-style">
							<label>大数据</label>
						</div>
						<span class="span-sty">初级</span>
						<span class="span-sty touxiang">5612</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="" target="_blank">
						<img src="img/kub.jpg" width="216" height="120">
						<span>部署落地+业务迁移 玩转k8s进阶与企业级实践技能</span>
						<div class="label-style">
							<label>Kubernetes</label>
							<label>运维</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">高级</span>
						<span class="span-sty touxiang">384</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="" target="_blank">
						<img src="img/angular.jpg" width="216" height="120">
						<span>Angular8开发拼多多webapp 从基础到项目实战</span>
						<div class="label-style">
							<label>Angular</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">217</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="" target="_blank">
						<img src="img/springcloudapi.jpg" width="216" height="120">
						<span>极速入门SpringCloud之API网关与服务发现</span>
						<div class="label-style">
							<label>Java</label>
							<label>SpringCloud</label>
						</div>
						<span class="span-sty">初级</span>
						<span class="span-sty touxiang">2043</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/javascript.jpg" width="216" height="120">
						<span>前端下一代开发语言TypeScript 从基础到axios实战</span>
						<div class="label-style">
							<label>JavaScript</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">1228</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/weifuwu.jpg" width="216" height="120">
						<span>基于Spring Cloud微服务架构 广告系统设计与实现</span>
						<div class="label-style">
							<label>微服务</label>
							<label>Spring Cloud</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">829</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/jisuanji.jpg" width="216" height="120">
						<span>编程必备基础知识 计算机组成原理+操作系统+计算机网络</span>
						<div class="label-style">
							<label>算法与数据结构</label>
							<label>数学</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">中级</span>
						<span class="span-sty touxiang">236</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/springboot.jpg" width="216" height="120">
						<span>Spring Boot 2.0深度实践之系列总览</span>
						<div class="label-style">
							<label>Java</label>
							<label>Spring Boot</label>
						</div>
						<span class="span-sty">高级</span>
						<span class="span-sty touxiang">1234</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
				<div class="box">
					<a href="details.html" target="_blank">
						<img src="img/socket.jpg" width="216" height="120">
						<span>系统掌握Socket核心技术，从容应对各种Socket应用场景</span>
						<div class="label-style">
							<label>Java</label>
							<label>Android</label>
						</div>
						<span class="span-sty">实战</span>
						<span class="span-sty">高级</span>
						<span class="span-sty touxiang">1333</span>
						<span class="span-sty star">★★★★★</span>
					</a>
				</div>
			</div>
			<div>

			</div>
		</section>
		<footer>
			<div class="footer">
				<a href="javascript:;" class="active" id="callme-a" onmouseout="dispn()" onmouseover="dispb()">联系我</a>
				<div class="callme" id="callme-div">
					<img src="img/callme.jpg" width="100" height="100">
				</div>
				<a href="javascript:;">意见反馈</a>
				<a href="https://gitee.com/lzz001/test_pages" target="_blank">代码托管</a>
				<a href="http://www.imooc.com" target="_blank">友情链接</a>
				<p>©&nbsp;2019&nbsp;lzz001.gitee.io/test_pages&nbsp;&nbsp zengzhiLai</p>
			</div>
		</footer>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			var index = 0; //下标
			$(".tab-btn .btn").click(function() {
				index = $(this).index(); //获取所点击元素的下标
				$(this).addClass("active").siblings().removeClass("active");
				$(".item").eq(index).fadeIn().siblings().fadeOut();
			});

			// 点击切换效果
			//右边
			$(".lr-tab .right").click(function() {
				index++;
				if (index > 3) {
					index = 0;
				}
				$(".item").eq(index).fadeIn().siblings().fadeOut(); //匹配index的淡入，其它的淡出
				$(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active"); //匹配的添加类active 其它的删除类
			});
			//左边
			$(".lr-tab .left").click(function() {
				index--;
				if (index < 0) {
					index = 3;
				}
				$(".item").eq(index).fadeIn().siblings().fadeOut();
				$(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
			});

			//定时器
			var time = setInterval(function() {
				index++;
				if (index > 3) {
					index = 0;
				}
				$(".item").eq(index).fadeIn().siblings().fadeOut(); //匹配index的淡入，其它的淡出
				$(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active"); //匹配的添加类active 其它的删除类
			}, 3000); // 3000毫秒
		</script>
		<script>
			function dispb(){
				$("#callme-div").css('display',"block");
			}
			function dispn(){
				$("#callme-div").css('display',"none");
			}
		</script>
	</body>
</html>
